<template>
  <!-- 工作台相关 -->
  <div class="go-chart">
    <n-layout>
      <layout-header-pro>
        <template #left>
          <header-left-btn></header-left-btn>
        </template>
        <template #center>
          <header-title></header-title>
        </template>
        <template #ri-left>
          <header-right-btn></header-right-btn>
        </template>
      </layout-header-pro>
      <n-layout-content content-style="overflow:hidden; display: flex">
        <div style="overflow: hidden; display: flex">
          <content-charts></content-charts>
          <content-layers></content-layers>
        </div>
        <content-configurations></content-configurations>
      </n-layout-content>
    </n-layout>
  </div>
  <!-- 右键 -->
  <n-dropdown
    placement="bottom-start"
    trigger="manual"
    size="small"
    :x="mousePosition.x"
    :y="mousePosition.y"
    :options="menuOptions"
    :show="chartEditStore.getRightMenuShow"
    :on-clickoutside="onClickOutSide"
    @select="handleMenuSelect"
  ></n-dropdown>
  <!-- 加载蒙层 -->
  <content-load></content-load>
</template>

<script setup lang="ts">
import { loadAsyncComponent, componentInstall } from '@/utils'
import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
import { useContextMenu } from './hooks/useContextMenu.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
import { getConfigApi } from '@/api/cloud/config.js'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { fetchChartComponent, fetchConfigComponent } from '@/packages/index'
import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Photos/index.d'
import { ChartFrameEnum, ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { FileItemType } from '../project/items'

const router = useRouter()

const chartHistoryStoreStore = useChartHistoryStore()
const chartEditStore = useChartEditStore()
const packagesStore = usePackagesStore()

// 记录初始化
const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/index.vue'))
const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/index.vue'))
const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle/index.vue'))
const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))
chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)

const getProjectInfo = async () => {
  const res: any = await getConfigApi({
    application: 'page_designer',
    datasource: router.currentRoute.value.params.id[0],
    name: router.currentRoute.value.params.id[1]
  })
  if (res.msg.length) {
    const data = {
      ...res.msg[0],
      content: JSON.parse(res.msg[0].content)
    }
    if (data.content.config) {
      for (let item of data.content.config.componentList) {
        componentInstall(item.chartConfig.conKey, fetchConfigComponent(item.chartConfig))
        componentInstall(item.chartConfig.chartKey, fetchChartComponent(item.chartConfig))
      }
    }
    chartEditStore.setEditProject(data)
    if (data.content.externalResource) {
      if (data.content.externalResource.images) {
        packagesStore.setPhotos(
          data.content.externalResource.images.map((item: FileItemType) => {
            return {
              ...ImageConfig,
              category: ChatCategoryEnum.PRIVATE,
              categoryName: ChatCategoryEnumName.PRIVATE,
              package: PackagesCategoryEnum.PHOTOS,
              chartFrame: ChartFrameEnum.STATIC,
              title: item.name,
              image: item.cloudUrl,
              dataset: item.cloudUrl,
              redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
            }
          })
        )
      } else {
        packagesStore.setPhotos(
          data.content.externalResource.icons.map((item: FileItemType) => {
            return {
              ...ImageConfig,
              category: ChatCategoryEnum.PRIVATE,
              categoryName: ChatCategoryEnumName.PRIVATE,
              package: PackagesCategoryEnum.PHOTOS,
              chartFrame: ChartFrameEnum.STATIC,
              title: item.name,
              image: item.cloudUrl,
              dataset: item.cloudUrl,
              redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
            }
          })
        )
      }
    }
  }
}
getProjectInfo()
// 右键
const { menuOptions, onClickOutSide, mousePosition, handleMenuSelect } = useContextMenu()
</script>

<style lang="scss" scoped>
@include go('chart') {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  @include background-image('background-image');
}
</style>
